<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OCR demo</title>
    <style>
        .show-result {
            border: 1px solid #ccc;
            width: 100%;
            min-height: 50px;
            padding: 5px;
            border-radius: 5px;
            box-sizing: border-box;
            
            white-space: break-spaces;
            word-wrap: break-word;
            word-break: break-all;
        }
    </style>
</head>
<body>
    <div>
        <h2>OCR(光学字符识别) demo</h2>
        <hr>
        <div>
            <input type="file" accept="image/*" capture="camera" onchange="takePhoto(event, 'photo')" />
            <br>
            <img id="photo" style="width: 200px;" src="" alt="暂无图像" />
            <br>
            <h4>解析结果:</h4>
            <pre id="showResult" class="show-result" ></pre>
        </div>
    </div>
    <script src="./tesseract/tesseract.min.js"></script>
    <script>
        console.log(window);
        function takePhoto(e, showImgId) {
            const input = e.target;
            if(input.files && input.files.length > 0) {
                const file = input.files[0];
                const url = URL.createObjectURL(file);
                const img = document.getElementById(showImgId);
                img.src = url;
                
                doOCR(url);

                img.onload = function() {
                    //?
                };
            }
        }

        
        async function doOCR(url) {
            console.log('doOCR==>');
            const showResult = document.getElementById('showResult');
            showResult.innerText = '初始化解析工具';
            
            // 第一个参数是语言, eng 英语, chi_sim 简体中文, chi_tra 繁体中文, 需要对应的 语言训练数据
            const worker = await Tesseract.createWorker(['chi_sim'], 1, {
                corePath: './tesseract/tesseract-core-simd-lstm.wasm.js',
                workerPath: "./tesseract/worker.min.js",
                langPath: './tesseract/traineddata', // 语言训练数据
                //logger: function(m){ console.log('worker==>', m); }, // 日志
            });

            // const worker = await Tesseract.createWorker('eng', 1, {
            //     workerPath: 'https://cdn.jsdelivr.net/npm/tesseract.js@v5.0.0/dist/worker.min.js',
            //     langPath: 'https://tessdata.projectnaptha.com/4.0.0', // 语言训练数据 下载地址
            //     corePath: 'https://cdn.jsdelivr.net/npm/tesseract.js-core@v5.0.0',
            // });

            //console.log('worker:', worker);

            showResult.innerText = '开始解析';

            try {
                // url 后参数是 语言
                const result = await worker.recognize(url);
                console.log('result:', result);
                console.log('result.data.text:', result.data.text);
                let text = result.data.text;
                // /\s*/ 匹配任何空白字符, 空格、制表符、换行符等,等价于 [\f\n\r\t\v]
                // /\x20/ 匹配一个空格
                text = text.replace(/\x20*/g, '');
                console.log('text:', text);
                document.getElementById('showResult').innerText = text;
                await worker.terminate();
                // 释放 url资源
                URL.revokeObjectURL(url);
            } catch (err) {
                document.getElementById('showResult').innerText = JSON.stringify(err);
            }
        }

    </script>
</body>
</html>